<!-- 项目编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate ? '修改项目' : '添加项目'"
    :visible="visible"
    width="1000px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <div
        style="font-size: smaller; text-indent: 40px; line-height: 40px; color: #F56C6C;"
      >
        应用密钥-SDK客户端使用; 支付密钥-研发服务端使用;
        发货接口地址-填写研发提供的发货接口地址
      </div>
      <el-form-item label="项目名称:" prop="app_name">
        <el-input
          :maxlength="20"
          v-model="form.app_name"
          placeholder="请输入项目名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="发货接口地址:" prop="pay_notify_url">
        <el-input
          :min="0"
          v-model="form.pay_notify_url"
          placeholder="请输入发货接口地址"
          class="ele-fluid ele-text-left"
        />
      </el-form-item>

      <el-form-item
        label="应用密钥:"
        prop="app_secret"
        v-if="isUpdate == false"
      >
        <el-input
          :maxlength="32"
          v-model="randomString1"
          placeholder="请输入应用密钥"
          clearable
        />
      </el-form-item>
      <el-form-item label="应用密钥:" prop="app_secret" v-else>
        <el-input
          :maxlength="32"
          v-model="form.app_secret"
          placeholder="请输入应用密钥"
          :disabled="true"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="支付密钥:"
        prop="payment_key"
        v-if="isUpdate == false"
      >
        <el-input
          :maxlength="32"
          v-model="randomString2"
          placeholder="请输入支付密钥"
          clearable
        />
      </el-form-item>
      <el-form-item label="支付密钥:" prop="payment_key" v-else>
        <el-input
          :maxlength="32"
          v-model="form.payment_key"
          placeholder="请输入支付密钥"
          :disabled="true"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="研发ID:"
      >
        <el-input
          :maxlength="32"
          v-model="form.appid"
          placeholder="请输入研发ID"
          clearable
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
// import uploadImage from '@/components/uploadImage'

export default {
  name: "AppEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  // components: { uploadImage },
  data() {
    return {
      // 表单数据
      form: Object.assign({ status: 1 }, this.data),
      randomString1: "",
      randomString2: "",
      // 表单验证规则
      rules: {
        pay_notify_url: [
          { required: true, message: "请输入发货接口地址", trigger: "blur" }
        ],
        app_name: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        app_secret: [
          { required: true, message: "请输入应用密钥", trigger: "blur" }
        ],
        payment_key: [
          { required: true, message: "请输入支付密钥", trigger: "blur" }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
        this.getRandomCode();
      }
    }
    // randomString1(newVal, oldVal) {
    //   if (oldVal == '' && !this.isUpdate) {
    //     console.log(oldVal,'old');
    //     this.form.app_secret = newVal;

    //   }
    // },
    // randomString2(newVal, oldVal) {
    //   if (oldVal == '' && !this.isUpdate) {
    //     this.form.payment_key = newVal;
    //   }
    // }
  },
  methods: {
    /* 保存编辑 */
    save() {
      console.log("!!!", this.form);
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("/app/edit", this.form)
            .then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    // 生成随机字符串
    generateRandomString(length) {
      const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
      let randomString = "";
      for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        randomString += characters[randomIndex];
      }
      return randomString;
    },

    // 生成两个不相同的随机字符串
    generateUniqueRandomStrings() {
      const randomStrings = new Set();
      while (randomStrings.size < 2) {
        const randomString = this.generateRandomString(32);
        randomStrings.add(randomString);
      }
      return Array.from(randomStrings);
    },
    getRandomCode() {
      // 使用示例
      const randomStrings = this.generateUniqueRandomStrings();
      this.randomString1 = randomStrings[0];
      this.randomString2 = randomStrings[1];
      this.form.app_secret = this.randomString1;
      this.form.payment_key = this.randomString2;
      console.log(this.randomString1);
      console.log(this.randomString2);
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    }
  },
  created() {
    this.getRandomCode();
    // this.form.app_secret = this.randomString1;
    // this.form.payment_key = this.randomString2;
  }
};
</script>

<style scoped></style>
